// PurchaseModal.tsx
import React from 'react';
import { Button, Modal, InputNumber } from 'antd';
import { useState } from 'react';

interface PurchaseModalState {
    visible: boolean;
    quantity: number | null;
}

function usePurchaseModal() {
    const [state, setState] = useState<PurchaseModalState>({ visible: false, quantity: 1 });

    const showModal = () => {
        setState({ ...state, visible: true });
    };

    const handleCancel = () => {
        setState({ ...state, visible: false });
    };

    const handleConfirm = () => {
        if (state.quantity !== null) {
            alert('采购成功，数量：' + state.quantity);
        } else {
            alert('请输入有效的数量');
        }
        setState({visible: false, quantity:1 });
    };

    const handleQuantityChange = (value: number | null) => {
        setState({ ...state, quantity: value });
    };

    return { ...state, showModal, handleCancel, handleConfirm, handleQuantityChange };
}

const PurchaseModal: React.FC = () => {
    const { visible, quantity, showModal, handleCancel, handleConfirm, handleQuantityChange } = usePurchaseModal();

    return (
        <div>
            <Button type='primary' onClick={showModal}>
                点击申请
            </Button>
            <Modal
                title={<strong>请选择您要采购的数量</strong>}
                visible={visible}
                onCancel={handleCancel}
                footer={null} // 移除默认底部按钮
            >
                <div style={{ marginBottom: 16 }}>
                    <InputNumber
                        min={1}
                        value={quantity}
                        onChange={handleQuantityChange}
                        style={{ width: '50%' }}
                    />
                </div>
                <Button type="primary" onClick={handleConfirm}>
                    确认提交
                </Button>
            </Modal>
        </div>
    );
};

export default PurchaseModal;